<template>
	<view>
		<view>
			<u-calendar
				ref="calendar"
				v-model="showDate"
				:max-date="getTime(7)"
				:min-date="getTime(1)"
				@change="changeTime"
			></u-calendar>
			<view @click="showDate = true" class="date_new">{{
				newDate == '' ? getTime(1) : newDate
			}}</view>
		</view>
		<view style="text-align: center; font-size: 16px; margin-top: 15px"
			>选择预约的时间段</view
		>
		<!--  v-if="forenoonShow" -->
		<view v-if="titleShow">
			<view v-if="allDate.length < 1">
				<view class="timeResidue_box" v-if="forenoon.length > 0">
					<view class="timeResidue">
						<view :class="{ timeList: forenoonIdx == 1 }" @click="forenoonClick"
							>上午
						</view>
						<!-- <view
									:class="{ timeList: forenoonIdx == index }"
									v-for="(item, index) in forenoon"
									:key="index"
									@click="forenoonClick(index, item)"
								>
									{{ item.startTime }}
								</view> -->
					</view>
				</view>
				<view class="timeResidue_box" v-if="afternoon.length > 0">
					<view class="timeResidue">
						<view
							:class="{ timeList: afternoonIdx == 1 }"
							@click="afternoonClick"
							>下午
						</view>
						<!-- <view
									:class="{ timeList: afternoonIdx == index }"
									v-for="(item, index) in afternoon"
									:key="index"
									@click="afternoonClick(index, item)"
								>
									{{ item.startTime }}
								</view> -->
					</view>
				</view>

				<!-- 夜间时间 -->
				<view class="timeResidue_box" v-if="residue.length > 0">
					<view class="timeResidue">
						<view :class="{ timeList: idx == 1 }" @click="timeClick"
							>夜间
						</view>
						<!-- <view
									:class="{ timeList: idx == index }"
									v-for="(item, index) in residue"
									:key="index"
									@click="timeClick(item, index)"
									>{{ item.startTime }}</view
								> -->
					</view></view
				>
			</view>

			<!-- 全天 -->
			<view v-else>
				<view class="timeResidue">
					<view :class="{ timeList: allIndex == 1 }" @click="allClick"
						>全天
					</view>
					<!-- <view
								:class="{ timeList: allIndex == index }"
								v-for="(item, index) in allDate"
								:key="index"
								@click="allClick(item, index)"
								>{{ item.startTime }}</view
							> -->
				</view>
			</view>
		</view>
		<view v-else> 该日期无排班 </view>
		<view
			style="
				padding: 10px;
				background: #fff;
				margin-top: 16px;
				text-align: center;
			"
		>
			<view style="margin-bottom: 10px; font-size: 16px; font-weight: bold"
				>当前选择的检查项目为</view
			>
			<view class="project_content">
				<view v-for="(item, index) in projectList" :key="index">
					<view class="project_">
						<view class="project_title">{{ item.itemName }}</view>
						<view style="color: #ffa707">￥{{ item.price }}</view>
					</view>
				</view>
				<view class="project_">
					<view class="project_title">预约日期</view>
					<view>{{ newDate == '' ? getTime(1) : newDate }}</view>
				</view>
				<view class="project_">
					<view class="project_title">预约时间</view>
					<view v-if="timeQuantum != ''">{{ timeQuantum }}</view>
					<view
						v-else
						style="
							color: red;
							font-weight: bold;
							font-size: 15px;
							font-weight: bold;
						"
						>暂未选择时间段</view
					>
				</view>

				<view class="total">
					<view class="total_title">共计:</view>
					<view>￥{{ totalFee }}</view>
				</view>
			</view>
		</view>
		<view>
			<u-button type="primary" @click="nextStep" :disabled="disabled"
				>立即支付</u-button
			>
		</view>
		<!-- <view v-if="showContent" class="content">
			<view>
				<u-calendar
					ref="calendar"
					v-model="showDate"
					:max-date="getTime(7)"
					:min-date="getTime(1)"
					@change="changeTime"
					:mode="mode"
				></u-calendar>
				<view @click="showDate = true" class="date_new">{{
					newDate == '' ? getTime(1) : newDate
				}}</view>
			</view>
		</view> -->
		<view class="safe"></view>
		<!-- <u-mask
			:show="showContent"
			z-index="-1"
			:custom-style="{ background: 'rgb(0 0 0 / 19%)' }"
		></u-mask> -->
		<u-modal v-model="showTime" :content="content"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import getTime from '../../utils/time'
import {
	getCheckTimeRecord,
	confirmAppointCheckFront,
	saveExamApply,
} from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			content: '您还未选择预约的时间段',
			showTime: false,
			disabled: false,
			showDate: false,
			titleShow: false,
			// showContent: true,
			// 夜间
			residue: [],
			// 上午
			forenoon: [],
			// 下午
			afternoon: [],
			// 全天
			allDate: [],
			newDate: '',
			projectList: [],
			idx: -1,
			allIndex: -1,
			forenoonIdx: -1,
			afternoonIdx: -1,
			timeQuantum: '',
			// prescribeList: [],
			deptId: '',
			endTime: '',
			shiftDate: '',
			startTime: '',
			clinicId: '',
			clinicTimeId: '',
			timeSerialNumber: '',
			totalFee: '',
			deptName: '',
			// 分类id
			examId: '',
			parameterData: [],
			//
			registerFee: '',
		}
	},
	onLoad(option) {
		// console.log(JSON.parse(option.parameter), '测试')
		this.totalFee = JSON.parse(option.price)
		console.log(this.totalFee, '5678')
		this.projectList = JSON.parse(option.parameter)
		// this.prescribeList = JSON.parse(option.parameter)
		this.deptId = this.projectList[0].prescribeList.orgDept.id
		this.deptName = this.projectList[0].prescribeList.orgDept.deptName
		this.examId = option.examId
		this.parameterData = []
		this.projectList.map(i => {
			this.parameterData.push(i.prescribeListList)
			console.log(this.parameterData, 'asd123')
		})
		// prescribeListList
		// this.parameterData = JSON.parse(option.parameter).prescribeListList
		this.getCheckTimeRecordList(this.orgCode, '002', getTime(1), this.deptId)
		// console.log(this.projectList, '1231321')
	},
	mounted() {
		this.$nextTick(() => {
			this.$refs.calendar.activeDate = getTime(1)
		})
	},
	computed: {
		...mapState({
			orgCode: state => state.orgCode,
			patientId: state => state.patientId,
			patientName: state => state.patientName,
			patientcardNo: state => state.patientcardNo,
			orgId: state => state.orgId,
			curHos: state => state.curHos,
			CardId: state => state.CardId,
			patientIdentity: state => state.patientIdentity,
			patientTelephone: state => state.patientTelephone,
			patientGender: state => state.patientGender,
		}),
	},
	methods: {
		getTime,

		getCheckTimeRecordList(orgCode, deptCode, clinicDate, deptId) {
			getCheckTimeRecord({
				orgCode: orgCode,
				deptCode: deptCode,
				clinicDate: clinicDate,
				deptId: deptId,
			}).then(({ data, head }) => {
				console.log(data, head, '时间')
				this.registerFee = data.registerFee
				this.timeQuantum = ''
				this.idx = -1
				this.allIndex = -1
				this.forenoonIdx = -1
				this.afternoonIdx = -1
				if (head.code == 200 && Array.isArray(data.timeList)) {
					this.titleShow = true
					if (data.timeList != null) {
						this.residue = []
						this.forenoon = []
						this.afternoon = []
						this.allDate = []
						data.timeList.map(i => {
							if (i.shift == 'N') {
								// this.residueShow = true
								// this.forenoonShow = false
								// 夜间
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'N'
									})
								this.residue = i.timeSlot
							} else if (i.shift == 'A') {
								// this.residueShow = false
								// this.forenoonShow = true
								// 上午
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'A'
									})
								this.forenoon = i.timeSlot
							} else if (i.shift == 'P') {
								// this.residueShow = false
								// 下午
								// this.forenoonShow = true
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'P'
									})
								this.afternoon = i.timeSlot
							} else if (i.shift == 'F') {
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'F'
									})
								this.allDate = i.timeSlot
								console.log(i.timeSlot, '全天')
							}
						})
					}
				} else {
					this.titleShow = false
				}
			})
		},
		nextStep() {
			console.log('测试')
			if (this.timeQuantum == '') {
				this.showTime = true
			} else {
				this.showTime = false
				console.log('提交')
				// appointExecuteTime //预约时间
				// timeSlot     8:00-8:30
				// serviceStartTime   8:00
				// serviceEndTime    8:30
				// patientId     //患者id
				// patientName   //患者名称
				// totalFee      //总费用    检查项目总费用
				// visitCardNo      //卡号
				// orgCode    100145
				// orgId          //翊廷医院对应的id
				// orgName   //机构名称（翊廷医院）
				// cardId        //卡id
				// deptId       //科室id     放射科id
				// deptName   //科室名称    放射科
				// scheduleId     //号别id    参考预约挂号   （查预约时间段时返回）
				// clinicTimeId   //号段id    参考预约挂号    （查预约时间段时返回）
				// idCardNo       //身份证号
				// phone       //电话
				// patientSex      //性别
				// ampm            //上午、下午      （查预约时间段时返回）
				// scheduleTimeSn      //时间段序号   参考预约挂号    （查预约时间段时返回）
				// payType        //支付方式    拉起支付成功后返回
				// examId
				// prescribeList: [
				//   {
				//     itemName   //检查项目名称
				//     num  默认1
				//     price
				//             itemId
				//   }
				// ]
				let parameter = {
					appointExecuteTime: this.newDate == '' ? getTime(1) : this.newDate,
					timeSlot: this.startTime,
					serviceStartTime: this.startTime,
					serviceEndTime: this.endTime,
					patientId: this.patientId,
					patientName: this.patientName,
					totalFee: this.totalFee,
					visitCardNo: this.patientcardNo,
					orgCode: this.orgCode,
					orgId: this.orgId,
					orgName: this.curHos,
					cardId: this.CardId,
					deptId: this.deptId,
					deptName: this.deptName,
					scheduleId: this.clinicId,
					clinicTimeId: this.clinicTimeId,
					idCardNo: this.patientIdentity,
					phone: this.patientTelephone,
					patientSex: this.patientGender,
					ampm: this.shiftDate,
					scheduleTimeSn: this.timeSerialNumber,
					examId: this.examId,
					prescribeList: this.parameterData,
					registerFee: this.registerFee,
					// timeQuantum: this.timeQuantum,
				}
				this.disabled = true
				confirmAppointCheckFront(parameter)
					.then(({ data, head }) => {
						if (head.code == 200) {
							console.log(data.clinicNo, '123132')

							// 接口
							parameter.serialNo = data.clinicNo
							parameter.clinicMasterId = data.id
							saveExamApply(parameter).then(({ data, head }) => {
								console.log(data, '123')
								if (head.code == 200) {
									console.log(data)
									// 支付
									this.$pay(data).then(succcess => {
										this.$refs.uToast.show({
											title: '支付成功',
											type: 'success',
											isTab: true,
											duration: 1000,
											url: '/pages/index/index',
										})
									})
								} else {
									this.getCheckTimeRecordList(
										this.orgCode,
										'002',
										this.newDate,
										this.deptId,
									)
									this.$refs.uToast.show({
										title: head.msg,
										type: 'error',
										duration: 1000,
									})
								}
							})
						} else {
							this.$refs.uToast.show({
								title: head.msg,
								type: 'error',
							})
						}
						this.disabled = false
					})
					.catch(() => {
						this.disabled = false
					})
				// console.log(parameter, '参数')
			}
		},
		changeTime(e) {
			console.log(e)
			this.newDate = e.result
			this.getCheckTimeRecordList(this.orgCode, '002', e.result, this.deptId)
		},
		publicParameter(item) {
			this.endTime = item.endTime
			this.startTime = item.startTime
			this.shiftDate = item.shift
			this.clinicId = item.clinicId
			this.clinicTimeId = item.clinicTimeId
			this.timeSerialNumber = item.timeSerialNumber
		},
		// 夜间
		timeClick() {
			this.timeQuantum = '夜间'
			this.idx = 1
			this.forenoonIdx = -1
			this.afternoonIdx = -1
			this.allIndex = -1
			this.publicParameter(this.residue[0])
		},
		// 上午
		forenoonClick() {
			this.timeQuantum = '上午'
			this.idx = -1
			this.afternoonIdx = -1
			this.allIndex = -1
			this.forenoonIdx = 1
			this.publicParameter(this.forenoon[0])
		},
		// 下午
		afternoonClick() {
			this.timeQuantum = '下午'
			this.idx = -1
			this.forenoonIdx = -1
			this.allIndex = -1
			this.afternoonIdx = 1
			this.publicParameter(this.afternoon[0])
		},
		//全天
		allClick() {
			this.timeQuantum = '全天'
			this.idx = -1
			this.afternoonIdx = -1
			this.forenoonIdx = -1
			this.allIndex = 1
			this.publicParameter(this.allDate[0])
			console.log(this.allDate[0])
		},
	},
}
</script>

<style lang="scss">
page {
	background: #f7f7f7;
}
.content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500rpx;
	position: relative;
	top: 300rpx;
	background-color: #fff;
}
.date_new {
	border-width: 1px;
	border-color: #5690fb;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #ffffff;
	color: #5690fb;
	font-size: 16px;
	/* display: inline-block; */

	text-align: center;
}
.project_content {
	.project_ {
		display: flex;

		.project_title {
			width: 60%;
			font-size: 15px;
			font-weight: bold;
		}
	}
	.total {
		display: flex;
		.total_title {
			width: 60%;
			font-weight: bold;
		}
	}
}
.timeResidue {
	// display: flex;
	// flex-wrap: wrap;
	// margin-top: 20rpx;
	// justify-content: space-between;
	view {
		padding: 0 20px;
		color: #056905;
		// width: 15%;
		text-align: center;
		height: 35px;
		/* align-items: center; */
		line-height: 35px;
		background: rgb(240, 249, 2449);
		margin: 0 15px;
		font-size: 13px;
	}
	.timeList {
		background: rgba(66, 256, 139, 1);
	}
}
.timeResidue_box {
	display: inline-block;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>